<template>
	<view class="page">
		<view class="box dis aic">
			<image src="/static/icon/icon08.png" mode="widthFix" class="icon"></image>
			<u--input placeholder="请输入手机号" border="none" v-model="phone"></u--input>
		</view>
		<view class="box dis aic">
			<image src="/static/icon/icon09.png" mode="widthFix" class="icon"></image>
			<u--input placeholder="请输入验证码" border="none" v-model="code" maxlength="6"></u--input>
			<view class="code" @click="sendCode">{{msg}}</view>
		</view>
		<view class="save" @click="bind">
			提交
		</view>
	</view>
</template>

<script>
	import {
		sendsms,
		memberbing
	}
	from "@/api.js"
	export default {
		data() {
			return {
				phone: '',
				code: '',
				isPassword: true,
				msg: "发送验证码",
				lock: false,

			}
		},
		methods: {
			async bind() {
				if (this.phone == '') {
					uni.showToast({
						icon: "none",
						title: "请输入手机号"
					})
					return
				}
				if (this.code == '') {
					uni.showToast({
						icon: "none",
						title: "请输入验证码"
					})
					return
				}
				let res = await memberbing({
					code: this.code,
					phone: this.phone
				})
				if (res.code == 200) {
					uni.showToast({
						icon: "none",
						title: "绑定成功"
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 2000)
				}
			},
			async sendCode() {
				let that = this
				if (this.phone == '') {
					uni.showToast({
						icon: "none",
						title: "请输入手机号"
					})
					return
				}
				if (this.lock) {
					return
				}
				if (this.phone) {
					let res = await sendsms(this.phone)
					console.log('res', res);
					if (res.code == 200) {
						that.lock = true
						that.msg = 60
						let a = setInterval(() => {
							if (that.msg <= 0) {
								clearInterval(a)
								that.msg = '重新获取验证码'
								that.lock = false

							} else {
								that.msg = that.msg - 1
							}
						}, 1000)
					} else if (res.code == 500 && res.message == '验证码发送频繁') {
						uni.showToast({
							icon: "none",
							title: "验证码发送频繁"
						})
					}

				}

			},
		}
	}
</script>

<style scoped lang="scss">
	.page {
		padding-top: 60rpx;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.box {
		width: 660rpx;
		height: 115rpx;
		padding: 26rpx 54rpx;
		box-sizing: border-box;
		margin: 0 auto 40rpx;
		background: #FAF4F0;
		border-radius: 67rpx 67rpx 67rpx 67rpx;

		.icon {
			width: 40rpx;
			margin-right: 20rpx;
		}

		.code {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #4A7AEC;
			text-align: center;
		}
	}

	.save {
		width: 660rpx;
		height: 115rpx;
		line-height: 115rpx;
		background: #F9EA69;
		border-radius: 67rpx 67rpx 67rpx 67rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 40rpx;
		color: #FFFFFF;
		text-align: center;
		margin: 200rpx auto;
	}
</style>